<template>
	<view class="timechoose" v-if="toggle">
		<view class="content">
			<view class="title">{{title}}</view>
			<template v-if="richCon">
				<view class="rich_con">
					<rich-text :nodes="msg"></rich-text>
				</view>
				<view class="con_close" @tap="hideAlert" v-if="!showBtn">
					<image src="/static/images/icon_close2.png"></image>
				</view>
			</template>
			<template v-else>
				<view class="con">{{msg}}</view>
				<view class="close" @tap="hideAlert" v-if="!showBtn">
					<image src="/static/images/icon_close3.png"></image>
				</view>
			</template>
			<slot></slot>
			<view class="btns box" v-if="showBtn">
        <view class="back_btn btn_child" @tap='hideAlert'>{{cancelText}}</view>
				<template v-if="type === 'btn'">
					<form @submit="handleExchange" report-submit class="sub_btn btn_child">
					  <button form-type="submit" :loading='loading' class="kfbt sub_btn btn_child">{{confirmText}}</button>
					</form>
				</template>
				<button open-type="contact" class="kfbt sub_btn btn_child" v-else-if="type === 'contact'">{{confirmText}}</button>
      </view>
		</view>
		<view class="make" @tap="hideAlert"></view>
	</view>
</template>

<script>
	import bus from '../../common/bus.js'
	export default {
		data() {
			return {
				toggle: false
			}
		},
		props: {
			title: {
				default: '温馨提示'
			},
			msg: String,
			// 是否显示按钮，默认为false
			showBtn: {
				default: false
			},
			// 确认文字描述
			confirmText: {
				default: '确认'
			},
			// 取消文字描述
			cancelText: {
				default: '取消'
			},
			// 按钮类型
			type: {
				default: 'btn'
			},
			loading: Boolean,
			// 内容显示格式
			richCon: {
				default: false
			}
			
		},
		methods: {
			hideAlert() {
				this.toggle = false
			},
			showAlert(){
				this.toggle = true
			},
			handleExchange(e){
				this.$emit('handleExchange', e)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.timechoose {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 88888;
		.content {
			position: absolute;
			top: 328rpx;
			left: 10%;
			width: 80%;
			// max-height: 250px;
			z-index: 88;
			background: #fff;
			border-radius: 36rpx;
			.close {
				position: absolute;
				bottom: -182rpx;
				left: 50%;
				margin-left: -30rpx;
				image {
					width: 60rpx;
					height: 60rpx;
				}
			}
			.con_close {
				position: absolute;
				top: 30rpx;
				right: 30rpx;
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
			.title {
				color: #2f2f2f;
				font-size: 32rpx;
				text-align: center;
				padding: 48rpx 26rpx;
				line-height: 50rpx;
				font-weight: bolder;
				white-space: 2rpx;
			}
			.con {
				font-size: 28rpx;
				color: #818181;
				line-height: 50rpx;
				padding: 0 44rpx 62rpx;
				text-align: left;
				text-indent: 2em;
				white-space: 2rpx;
				max-height: 200px;
			}
			.rich_con {
				font-size: 28rpx;
				color: #818181;
				line-height: 50rpx;
				padding: 0 44rpx 62rpx;
				text-align: left;
				white-space: 2rpx;
				max-height: 200px;
				overflow-y: auto;
				height: 560rpx;
			}
			.btns {
				height: 88rpx;
				width: 100%;
				border-radius: 0 0 36rpx 36rpx;
				overflow: hidden;
				.btn_child {
					width: 100%;
					text-align: center;
					line-height: 88rpx;
					color: #fff;
					&.back_btn {
						background: #d8d8d8;
					}
					&.sub_btn {
						background: #0ec124;
					}
				}
			}
		}
		.make {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			background: rgba(0, 0, 0, 0.5);
		}
	}


</style>
